<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          @click="exportExcel"
        >
          导出
        </el-button>
      </template>
      <template v-slot:userName="{ row }">
        <el-button
          type="text"
          @click="showUserInfoDialog(row.userId)"
        >
          {{ row.userName }}
        </el-button>
      </template>
      <template v-slot:petId="{ row }">
        <el-button
          type="text"
          @click="showPetDetailDialog(row.petId)"
        >
          {{ row.petId }}
        </el-button>
      </template>
      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          v-if="scope.row.status !== CLOUD_ADOPT_ORDER_STATUS.NO_PAY"
          type="text"
          @click="showTradeFlowDialog(scope.row.orderCode)"
        >
          交易流水记录
        </el-button>
        <el-button
          v-if="scope.row.status === CLOUD_ADOPT_ORDER_STATUS.IN_PROGRESS"
          type="text"
          @click="showPauseDialog(scope.row)"
        >
          停止订单
        </el-button>
        <el-button
          v-if="
            scope.row.status === CLOUD_ADOPT_ORDER_STATUS.STOPPED ||
            scope.row.status === CLOUD_ADOPT_ORDER_STATUS.STOPPED_NOT_EXPIRED
          "
          type="text"
          @click="showStopDetail(scope.row.orderCode)"
        >
          停止原因
        </el-button>
        <el-button
          v-if="
            scope.row.status === CLOUD_ADOPT_ORDER_STATUS.STOPPED_NOT_EXPIRED
          "
          type="text"
          @click="cancelStopOrder(scope.row.orderCode)"
        >
          取消停止订单
        </el-button>
      </template>
    </avue-crud>
    <user-info-dialog
      v-model="showUserInfo"
      :user-id="userId"
    ></user-info-dialog>
    <tradeFlowDialog
      v-model="showTradeFlow"
      :order-code="orderCode"
    ></tradeFlowDialog>
    <addStopReasonDialog
      v-model="showPause"
      :order-code="orderCode"
      :start-time="startTime"
      :end-time="endTime"
      @refresh="getList"
    ></addStopReasonDialog>
    <petDetailPopup
      :id="petId"
      v-model="petDetailVisible"
    ></petDetailPopup>
    <viewStopReasonDialog
      v-model="detailVisible"
      :order-code="orderCode"
    ></viewStopReasonDialog>
  </basic-container>
</template>
<script>
import { tableOption } from '@/const/crud/pet/cloudAdoptOrder.js';
import userInfoDialog from '@/views/community-content/component/userInfoDialog.vue';
import petDetailPopup from '@/views/pet/base-file/components/detailPopup.vue';
import tradeFlowDialog from './components/order/tradeFlowDialog.vue';
import addStopReasonDialog from './components/order/addStopReasonDialog.vue';
import viewStopReasonDialog from './components/order/viewStopReasonDialog.vue';
import crudMixins from '@/mixins/crud.js';
import { fetchAdoptOrderList, cancelStopOrder } from '@/api/core/adopt';
import { CLOUD_ADOPT_ORDER_STATUS } from '@/const/type';

export default {
  components: {
    userInfoDialog,
    tradeFlowDialog,
    addStopReasonDialog,
    petDetailPopup,
    viewStopReasonDialog,
  },
  mixins: [crudMixins],
  data() {
    return {
      CLOUD_ADOPT_ORDER_STATUS,
      tableOption: tableOption,
      form: {},
      showUserInfo: false,
      petDetailVisible: false,
      showTradeFlow: false,
      showPause: false,
      userId: '',
      petId: '',
      orderCode: '',
      detailVisible: false,
      startTime: '',
      endTime: '',
    };
  },
  methods: {
    //导出
    exportExcel() {
      this.downBlobFile(
        '/core/virtual/order/export',
        this.searchForm,
        '云养订单.xlsx'
      );
    },
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      const timeObj = {};
      //创建时间
      if (this.searchForm.createTime && this.searchForm.createTime.length) {
        timeObj.startTime = this.searchForm.createTime[0];
        timeObj.endTime = this.searchForm.createTime[1];
      }
      fetchAdoptOrderList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
          },
          this.searchForm,
          timeObj
        )
      )
        .then((res) => {
          this.tableData = res.data.data.records;
          this.page.total = res.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    //用户信息
    showUserInfoDialog(userId) {
      this.userId = `${userId}`;
      this.showUserInfo = true;
    },
    //宠物信息
    showPetDetailDialog(petId) {
      this.petId = petId;
      this.petDetailVisible = true;
    },
    //交易流水
    showTradeFlowDialog(code) {
      this.showTradeFlow = true;
      this.orderCode = code;
    },
    //停止订单
    showPauseDialog(row) {
      this.orderCode = row.orderCode;
      this.startTime = row.startTime;
      this.endTime = row.endTime;
      this.showPause = true;
    },
    showStopDetail(code) {
      this.orderCode = code;
      this.detailVisible = true;
    },
    //取消停止云认养订单
    cancelStopOrder(orderCode) {
      const tip = `取消停止订单后，将恢复为原订单状态和到期日期，确定取消停止订单吗？`;
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return cancelStopOrder(orderCode);
        })
        .then(() => {
          this.$message.success('操作成功');
          this.getList();
        });
    },
  },
};
</script>
